<template>
	<view class="login-container">
		<uni-icons type="contact-filled" size="100px" color="#afafaf"></uni-icons>
		<button type="primary" class="btn-login"  @click="goLogin">一键登录</button>
		<text class="tips-text">登陆后尽享更多权益</text>
	</view>
</template>

<script>
	import{mapMutations,mapState} from 'vuex'
	export default {
		name:"my-login",
		data() {
			return {
				
			};
		},
		methods:{
			...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo']),
			      goLogin() {
							uni.getUserProfile({
							desc:'获取微信用户的昵称与头像',
							  fail:res=>{
							  if(res.errMsg==='getUserProfile:fail auth deny') return uni.$showMsg('你取消了登录授权!')
							  },
						      success:res => {
							  this.updateUserInfo(res.userInfo)
							  this.getToken(res)
							  console.log(res)
							},
							})	
					},
					async	getToken(info){
					// 获取code对应值
					const[err,res] =await uni.login().catch(err=>err)
					if(err||res.errMsg!=='login:ok') return uni.$showMsg('登录失败！')
					//准备参数
					const query={
						code:res.code,
					}
					console.log(query)
					const loginResult=await uni.$http.get('/cantlogin/xcxlogin',query)
					console.log(loginResult)
					if(loginResult.statusCode!==200) return uni.$showMsg('登录失败！')
					//直接把token保存到vuex中
					// 需要改后面
					this.updateToken(loginResult.data)
					this.navigateBack()
					},
					navigateBack(){
						if(this.redirectInfo&&this.redirectInfo.openType==='switchTab'){
							uni.switchTab({
								url:this.redirectInfo.from,
								complete:()=>{
									this.updateRedirectInfo(null)
								}
							})
						}
					}
	},
	computed:{
		...mapState('m_user',['redirectInfo'])
	}
	}
</script>

<style lang="scss">
	page{
		background-color:#ffffff;
	}
.login-container{
	height: 750rpx;
	background-color: #F8F8F8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	&::after{
		content: '';
		display: block;
		width: 100%;
		height: 40px;
		background-color: white;
		position: absolute;
		bottom: 0;
		left: 0;
		border-radius: 100%;
		transform: translateY(50%);
	}
	.btn-login{
		width: 90%;
		border-radius: 100px;
		margin: 15px 0;
		background-color: #ff1920;
	}
	.tips-text{
		font-size: 12px;
		color: gray;
	}
}
</style>
